<template>
  <div class="xianshi" @mouseleave="yichu">
    <div class="xs_top">
      <img
        :src="item.imag"
        alt=""
      />
      <div class="xs_rig">
        <p>￥{{item.jiage}}.00</p>
        <span>预收入2.8元</span>
      </div>
    </div>
    <div class="spmc" style="height:30px;width:70%;margin:0 auto; ">
    <div>{{item.xinxi}}</div>
    </div>
    <div class="bot">
      <div class="lef">
        <p class="lef_top">
          <i class="el-icon-s-shop"></i>
          库存<span>952</span>件
        </p>
        <p class="lef_bot">
          <i class="el-icon-s-order"></i>
          月销<span>589</span>件
        </p>
      </div>
      <div class="rig" @click="dianji">
        <i :class="clas? 'el-icon-star-off': 'el-icon-star-on'"></i>
        <div>标注</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            clas:true
        }
    },
    props:['item'],
    methods:{
        yichu(){
            this.$emit('yichu', '555')
            console.log(222);
        },
        dianji(){
            this.clas = !this.clas
        }
    }
};
</script>

<style lang="scss" scoped>
.xianshi{
    box-shadow: 0px 0px 5px #ddd;
    .xs_top{
        height: 50px;
        display: flex;
        align-items: center;
        img{
            width: 35px;
            height: 35px;
            
        }
        .xs_rig{
            flex: 1;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            font-weight: 700;
            p{
                font-size: 16px;
                margin: 0;padding: 0;
            }
            span{
                transform: scale(50%);
                font-size: 16px;
            }
        }
    }
    .spmc{
        height: 40px;
    div{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 120%;
        height: 32px;
        margin-left: -12px;
        font-size: 12px;
    }
    }
    .bot{
        display: flex;
        align-items: center;
        .lef{
            flex: 1;
            height: 60px;
            p{
              transform: scale(80%);
              width: 120%;
                height: 30px;
                line-height: 30px;
                font-size: 12px;
                margin: 0;
                flex: 1;
            }
        }
        .rig{
            cursor: pointer;
            flex: 1;
        }
    }
}
</style>